<template>
  <div class="app_main">
    <router-view v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <component :is="Component" :key="routerKey" />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from "vue";
import { useRoute } from "vue-router";
import themes from '@/styles/theme/variables.less'

export default defineComponent({
  name: "AppMain",
  props: {},
  data() {
    return {
      PC: themes.primaryColor
    }
  },
  components: {},
  setup(props) {
    const routerKey = computed(() => {
      return useRoute().path;
    });

    return {
      routerKey,
    };
  },
  //
  mounted() {},
});
</script>

<style lang="scss">
.app_main {
  height: 100%;
  overflow: auto;
  @include scrollBar(v-bind(PC));
}
</style>